<template>
  <el-card shadow="never">
    <el-button type="primary" @click="printReceipt">打印小票</el-button>
    <el-container :style="{ height: h + 'px' }">
      <el-aside width="50%" class="border">
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
          <el-table-column prop="name" label="商品名" />

          <el-table-column label="分類">
            <template #default="{ row }">
              <span>{{ row.cate.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品圖">
            <template #default="{ row }">
              <el-image
                class="mr-3 rounded"
                :src="row.cover_pic"
                fit="cover"
                :lazy="true"
                style="width: 50px; height: 50px"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="商品價格" />
          <el-table-column prop="num" label="商品庫存" />

          <el-table-column label="操作" width="300px">
            <template #default="{ row }">
              <el-button
                size="small"
                text
                type="primary"
                @click="handleCreate(row)"
                >添加</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-aside>
      <el-main>
        <el-table :data="datas" style="width: 100%" v-loading="loading">
          <el-table-column prop="name" label="商品名" />

          <el-table-column label="分類">
            <template #default="{ row }">
              <span>{{ row.cate.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品圖">
            <template #default="{ row }">
              <el-image
                class="mr-3 rounded"
                :src="row.cover_pic"
                fit="cover"
                :lazy="true"
                style="width: 50px; height: 50px"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="商品價格" />
          <el-table-column prop="num" label="商品庫存" />

          <el-table-column label="操作" width="300px">
            <template #default="{ row }">
              <el-button
                size="small"
                text
                type="primary"
                @click="handleDelete(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-between">
          <el-button @click="onSubmit" type="primary">确定</el-button>

          <el-form-item label="用户id">
            <el-input v-model="users_id"></el-input>
          </el-form-item>
          <el-form-item label="折扣" @input="hh">
            <el-input v-model="discount"></el-input>
          </el-form-item>

          <span class="text-red-300">总价：{{ totalMoney }}</span>
        </div>
      </el-main>
    </el-container>
  </el-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import { getProduct } from "~/api/product.js";
import { createReservation } from "~/api/reservation.js";
import { toast } from "../../composables/util";
import { getPrint } from "~/api/order.js";
const windowHeight = window.innerHeight || document.body.clientHeight;
const h = windowHeight - 64 - 44 - 40;

const tableData = ref([]);
const loading = ref(false);
const getData = (p = null) => {
  if (typeof p == "number") {
    curpage.value = p;
  }
  loading.value = true;
  getProduct(p)
    .then((res) => {
      tableData.value = res.data.data;
    })
    .finally(() => {
      loading.value = false;
    });
};
getData();

const discount = ref(null);
const totalMoney = ref(null);
//添加
const datas = ref([]);
const users_id = ref(null);
const handleCreate = (row) => {
  datas.value.push(row);
  let money = datas.value.map((o) => o.price);

  // totalMoney.value = eval(money.join("+")) * discount.value * 0.1;
  // if (discount.value.leng) {
  //   alert(111);
  // }

  totalMoney.value = eval(money.join("+"));
};

function hh() {
  let money = datas.value.map((o) => o.price);
  totalMoney.value = eval(money.join("+"));

  totalMoney.value = totalMoney.value * discount.value * 0.1;
}

//删除
const handleDelete = (row) => {
  let number = datas.value.indexOf(row.id);
  console.log(number);
  if (number !== "-1") {
    datas.value.splice(number, 1);
  }
};

var total;
const onSubmit = () => {
  datas.value.map((o) => {
    o.total = totalMoney.value;
    return o.total;
  });
  createReservation(datas.value).then((res) => {
    toast("成功");
    location.reload();
  });
};

const printReceipt = () => {
  getPrint().then((res) => {
    toast("小票打印成功");
  });
};
</script>
